LAPORAN TUGAS MATA KULIAH
METODOLOGI DESAIN PERANGKAT LUNAK PRAKTIK
Dosen : Irma Handayani, S.Kom., M.Cs.
Studi Kasus
“ PERANCANGAN APLIKASI MENGGAMBAR ONLINE BERBASIS WEB
MENGGUNAKAN METODE SCRUM ”
Oleh :
5200411122 Gressensia Olivia Neno Aumenu
5200411144 Bella Primin
5200411202 Berliana 'Isyatin Rodhiyah
5200411226 Ade Lia Saputri
5200411236 Lili Christi
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS TEKNOLOGI YOGYAKARTA
BAB I
PENDAHULUAN
1.1 Latar Belakang
Menggambar adalah salah satu cara untuk mengekspresikan perasaan melalui goresan
pena. Untuk mengekspresikan diri, biasanya anak kecil akan suka mencoret-coret kertas.
Dikarenakan kebiasaan mencoret itu, banyak kertas yang terbuang dan tidak bisa dipakai
lagi. Apalagi penggunaan kertas dalam kehidupan semakin bertambah. Banyaknya
konsumsi kertas tentu saja dapat mempengaruhi tingkat penebangan pohon.
Selain kertas, banyak pula benda benda yang rusak, juga banyak dinding yang kotor
akibat coretan para anak kecil. Kerusakan yang ditimbulkan akan membutuhkan lebih
banyak budget untuk memperbaikinya. Selanjutnya, penggunaan pensil, pensil warna,
krayon, ataupun cat, belum terlalu perlu hanya untuk bermain anak-anak, karna akan
menambah budget yang dibutukan untuk itu.
Berawal dari adanya keluhan para orangtua dari anak-anak tentang menggambar
dengan sistem manual, banyaknya media serta bahan yang harus dikumpulkan, untuk itu
kami melakukan sebuah pembuatan rancangan aplikasi menggambar berbasis web.
Dalam aplikasi menggambar online ini dapat membantu meminimalisir penggunaan
kertas sebagai media serta dapat mengurangi budget yang akan dikeluarkan untuk anak-
anak menggambar. Selain itu, aplikasi ini akan membantu anak-anak untuk belajar
menggambar. Hal ini sangat mempermudah proses menggambar dalam media dan bidang
yang ada.
Kebutuhan akan berbagai macam urusan dalam segala aktivitas di berbagai bidang
skala kebutuhan yang sangat besar telah melibatkan komputer sebagai sarana untuk
penyimpanan dan pemrosesan data, komputer telah mampu menciptakan mekanisme kerja
yang semakin maju dan lebih efektif. Kami menggunakan software HTML sebagai alat
bantu dalam proses pembuatan aplikasi yang diharapkan dapat membantu jalannya proses
penggambaran dengan adanya sistem yang efisien dan lebih fleksibel.
1.2 Batasan Masalah
Berdasarkan dari identifikasi masalah tersebut, kami membatasi masalah hanya pada:
a. Alat menggambar yang digunakan hanya berupa garis dan warna.
b. Tampilan menggambar berupa kanvas, volume garis, dan pilihan warna.
c. Gambar dapat disimpan, diubah, dan dihapus.
1.3 Rumusan Masalah
Mengenai rumusan masalah yang akan dibahas, berdasarkan konteks masalah yang
diuraikan di atas, khususnya yaitu:
a. Bagaimana cara membuat aplikasi menggambar berbasis web.
b. Bagaimana merancang dan membangun aplikasi menggambar yang mudah
digunakan untuk anak-anak.
1.4 Tujuan Penelitian
Tujuan dilakukanya penelitian ini yaitu:
a) Menghasilkan sebuah aplikasi menggambar untuk anak-anak.
b) Menghasilkan aplikasi menggambar yang dapat dengan mudah digunakan.
1.5 Manfaat Penelitian
Berikut adalah manfaan dari dilakukanya penelitian ini adalah :
a) Mepermudah anak-anak untuk dapat menggambar dan mewarnai.
b) Mengurangi penggunaan kertas
c) Mengurangi penggunaan budget untuk menggambar.
BAB II
LANDASAN TEORI
2.1 Definisi Menggambar
Secara umum pengertian menggambar adalah kegiatan menorehkan pensil ataupun
pewarna di atas media kertas. Sedangkan pengertian secara khusus, menggambar adalah
kegiatan-kegiatan membentuk imaji, dengan menggunakan banyak pilihan teknik dan alat
dengan membuat tanda-tanda tertentu di atas permukaan media dengan mengolah goresan
dari alat gambar. Gambar merupakan karya seni rupa dua dimensi yang berfungsi untuk
untuk menerangkan ataupun menjelaskan sesuatu.
2.2 Sistem Menggambar
Menggambar adalah kegiatan membentuk citra dengan menggunakan banyak
pilihan teknik dan alat. Dengan membuat tanda-tanda tertentu di atas permukaan dan
mengolah goresan dari alat gambar. Kebanyakan karya menggambar adalah representasi
dari ingatan atau imajinasi seorang juru gambar.
2.3 HTML
HTML adalah bahasa standar pemrogaman yang digunakan untuk membuat halaman
website, yang diakses melalui internet. Singkatan dari "Hypertext Markup Language" atau
"bahasa markup". HTML disusun berdasar kode dan simbol tertentu, yang dimasukkan
dalam sebuah file atau dokumen. Sehingga bisa ditampilkan pada layar komputer. Dan
bisa dipahami oleh para pengguna internet.
Memahami setiap kata yang terkandung, hypertext sendiri dimaksudkan sebagai
metode yang digunakan untuk berpindah laman web ke laman lain. Usai mengklik tulisan
atau simbol yang muncul di halaman website.
Lalu istilah markup, diartikan sebagai suatu hal yang dilakukan tag HTML terhadap
teks didalamnya. Contoh jika mengetik suatu teks dengan tanda tag . Maka teks tersebut
akan muncul dengan huruf tebal atau bold di laman website.
2.4 CSS
CSS adalah kepanjangaan dari Cascading Style Sheets yang berguna untuk
menyederhanakan proses pembuatan website dengan mengatur elemen yang tertulis di
bahasa markup.CSS dipakai untuk mendesain halaman depan atau tampilan website. CSS
menangani tampilan dan ‘rasa’ dari halaman website.
Ada banyak hal yang dapat Anda lakukan menggunakan CSS dibandingkan dengan
bahasa pemrograman inti seperti HTML dan PHP. Ketika menggunakan CSS, Anda dapat
mengatur warna teks, jenis font, baris antar paragraf, ukuran kolom, dan
jenis background yang dipakai.Tidak hanya itu CSS juga bisa untuk mendesain layout,
variasi tampilan di berbagai perangkat yang berbeda, dan berbagai efek yang dipakai di
dalam website.
CSS sangat mudah dipelajari, tapi juga powerful karena dapat mengontrol penyajian
tampilan dari dokumen HTML. Mulai dari yang simpel sampai kompleks. Tidak heran jika
saat ini CSS hampir dipakai di berbagai website untuk dikombinasikan dengan HTML
maupun PHP.
2.5 JAVASCRIPT
JavaScript (disingkat JS) adalah bahasa pemrograman tingkat tinggi dan dinamis.
JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web popular
seperti Google Chrome, Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera.
Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.
JavaScript merupakan salah satu teknologi inti World Wide Web selain HTML dan CSS.
JavaScript membantu membuat halaman web interaktif dan merupakan bagian aplikasi
web yang esensial.
2.6 Metode Scrum
Scrum adalah salah satu metode rekayasa software dengan menggunakan prinsip-
prinsip agile yang bertumpu pada kekuatan kolaborasi tim, incremental product dan proses
iterasi untuk mewujudkan hasil akhir. Menurut schwaber & sutherland scrum adalah
sebuah kerangka kerja yang dapat mengatasi suatu masalah komplek yang selalu berubah,
dan juga dinilai dapat memberikan kualitas produk yang baik sesuai dengan keinginan
pengguna secara kreatif dan produktif
Dalam teknik scrum terdapat tiga peranan penting, diantaranya adalah:
a) Product Owner adalah seseorang yang memiliki tanggung jawab untuk terus
berinteraksi kepada tim pengembang terkait dengan visi dan prioritas
sehingga dapat dihasilkannya nilai bisnis dari produk yang dikembangan
secara maksimal.
b) Scrum Master berfungsi sebagai fasilitator untuk product owner dan tim
pengembang yang terdiri dari developer dan tester (Quality Asurance).
Scrum Master tidak bertanggung jawab denganpengelolaan tim. Scrum
Master membantu tim menghilangkan hambatan dan mencapai tujuan.
Scrum Master juga bertugas memberikan rekomendasi kepada product
owner tentang bagaimana cara memaksimalkan Return On Investment (ROI)
untuk tim.
c) Development Team/Scrum Team yang mengatur urusan teknik pengerjaan
project. Development Team atau tim pengembang memiliki sekitar lima
sampai sembilan anggota.
2.6.1 Tahapan Metode Scrum
Tahapan pengembangan sistem dengan metode Scrum dapat
diilustrasikan dalam gambar 1 sebagai berikut :
Penjelasan proses scrum secara umum dari Gambar diatas adalah sebagai berikut:
a) User Story
User Story adalah deskripsi secara rinci tentang kebutuhan sistem dalam bentuk
bahasa yang dapat dengan mudah dipahami oleh sudut padang end user. User story
digunakan sebagai acuan untuk membuat product backlog.
b) Product Backlog
Product Backlog adalah daftar urutan segala sesuatu yang dibutuhkan dalam
sistem maupun produk. Isi dari Product Backlog berisi fitur yang akan diterapkan
ke dalam sistem beserta estimasi waktu pengerjaannya. Dokumen ini selalu berubah-
ubah secara berkala seiring dengan perkembangan produk agar menghasilkan
produk yang layak. Product Owner merupakan satu-satunya yang bertanggung
jawab pengelolaan Product Backlog.
c) Sprint
Sprint adalah suatu siklus waktu dengan durasi maksimal satu bulan atau kurang.
Durasi pada sprint sepanjang pengembangan produk tidak berubah. Tujuan sprint
adalah untuk menyelesaikan sesuatu (Sprint Goal).
d) Sprint Backlog
Sprint Backlog adalah kumpulan dari item Product Backlog yang diidentifikasi
oleh tim scrum. Daftar ini dikerjakan selama sprint berlangsung. Tim memilih
beberapa item product backlog dan mengidentifikasi tugas-tugas yang perlu untuk
diselesaikan berdasarkan user story yang ada.
e) Daily Scrum
Daily Scrum adalah aktivitas harian di dalam sprint yang dilakukan scrum team
untuk memeriksa apa yang telah dikerjakan, apa yang akan dikerjakan dan apa yang
mungkin menjadi hambatan dalam pengerjaan proyek. Scrum team menggunakan
daily scrum sebagai sarana untuk memperbaiki perkembangan produk agar
tercapainya sebuah Sprint Goal.
BAB III
ANALISIS DAN PERENCANAAN SISTEM
3.1 ANALISIS SISTEM
Penelitian ini diharapkan dapat menghasilkan sebuah aplikasi menggambar yang
dapat digunakan untuk semua kalangan, terutama anak-anak, dengan mudah dan efektif.
Kebutuhan system ialah sebagai berikut :
a. Aplikasi ini berbasis web yang akan digunakan pada browser.
b. Aplikasi akan terkoneksi ke server database melalui koneksi internet dari
perangkat user
3.2 PENELITIAN
Dalam penelitian ini menganalisa dan memaparkan bagaimana konsep penerapan
metode scrum dalam pengembangan aplikasi menggambar berbasis web. Kami merancang
aplikasi dengan melakukan beberapa penelitian dengan menerapakan metode scrum dalam
mengembangkan sistem aplikasi menggambar berbasis web yang kami buat.
Penelitian ini dengan judul Perancangan Aplikasi Menggambar Online Berbasis Web
Menggunakan Metode Scrum menghasilkan sistem perancangan aplikasi yang dapat
memenuhi kebutuhan pengguna secara signifikan dalam metode scrum. Penyelesaian
setiap modul perangkat lunak berdasarkan tahapan dari metode scrum dapat berjalan
dengan baik dan lancar dalam waktu yang singkat.
3.3 METODE PENELITIAN
Teknik pengumpulan data yang digunakan dalam penelitian ini, sebagai berikut:
a. Observasi
Observasi merupakan teknik mendapatkan data primer dengan cara mengamati
langsung onyek datanya (Jogiyanto, 2008). Pada penelitian ini, observasi
dilakukan secara online untuk mengamati proses user menggambar dan hasil
b. Wawancara
Wawancara adalah komunikasi dua arah untuk mendapatkan data daru responden
(Jogiyanto, 2008). Wawancara dilakukan untuk mengkonfirmasi data atau fakta
yang diperoleh pada saat observasi serta sekaligus untuk menggali software
requirement dari user. Wawancara dilakukan kepada user yang terlibat dalam
proses menggambar online
c. Studi Pustaka
Studi pustaka dilakukan untuk mengumpulkan data dan informasi melalui
dokumen-dokumen baik dalam bentuk buku, jurnal, prosiding, laporan-laporan,
atau bentuk-bentuk lain dalam bentuk tercetak maupun digital. Studi pustaka akan
semakin kredibel apabila didukung oleh foto-foto atau karya tulis akademik dan
seni yang telah ada.
3.4 METODE PENGEMBANGAN SISTEM
Dalam setiap iterasi kegiatan pengembangan tersebut, terdiri dari rangkaian kegiatan,
sebagai berikut :
1) Analisa Kebutuhan Sistem
Pada tahap ini dilakukan asesmen terhadap pengguna untuk menggali secara detail
software requirement yang dibutuhkan oleh pengguna.
2) Desain
Pada tahap desain dilakukan perancangan sistem, mulai dari desain arsitektur
sistem, desain proses bisnis, hingga desain user interface.
3) Code Generation
Pada tahap ini dilakukan penulisan kode program dengan menggunakan bahasa
PHP.
4) Testing
Kegiatan testing dilakukan untuk meminimalisir kesalahan (error) dan untuk
memastikan keluaran yang dihasilkan telah sesuai dengan user requirement
dengan menggunakan metode black box testing.
5) Support
Kegiatan support dilakukan untuk menindaklanjuti perubahan yang dimintakan
user setelah keluaran telah diserahkan kepada pengguna. Perubahan bisa terjadi
karena adanya kesalahan yang muncul dan tidak terdeteksi saat pengujian atau
adaptasi dengan kebutuhan/lingkungan baru.
3.5 PERANCANGAN SISTEM
Perancangan system aplikasi menggambar berbasis web ini menggunakan DFD
(Data Flow Diagram) yang merupakan salah satu teknik pemodelan desain sistem berbasis
web. Pemodelan ini menjadi bagian penting dalam pengembangan sistem karena menjadi
satu satunya cara untuk memvisualisasikan desain sistem dan memeriksa apakah sudah
memenuhi standar yang diinginkan sebelum memulai coding. Beberapa jenis Diagram
yang dibuat antara lain yaitu Diagram konteks, DFD dan ERD.
a. Diagram Level 0 (Diagram Konteks)
Diagram konteks atau level 0 merupakan diagram dengan tingkatan paling
rendah, dimana menggambarkan sistem berinteraksi dengan entitas eksternal.
Pada diagram konteks akan diberi nomor untuk setiap proses yang berjalan,
dimulai dari angka 0 terlebih dahulu.
b. Diagram Level 1
DFD level 1 merupakan lanjutan dari diagram konteks, dimana setiap proses
yang berjalan akan diperinci pada tingkatan ini. Sehingga, proses utama akan
dipecah menjadi sub – sub proses yang lebih kecil lagi.
c. Diagram level 2
DFD level 2 merupakan tingkat lanjutan dari level yang sebelumnya, dimana
pada fase ini akan dijelaskan lebih detail terkait tiap prosesnya. Namun, untuk
tingkatan ini jarang sekali dikerjakan dan lebih banyak hanya menerapkan dua
level di bawahnya saja.
d. ERD
ERD (Entity Relationship Diagram) atau diagram hubungan entitas adalah
diagram yang digunakan untuk perancangan suatu database dan menunjukan
relasi antar objek atau entitas beserta atribut-atributnya secara detail.
3.6 PERANCANGAN DATABASE
3.7 DESAIN INTERFACE
3.7.1 Landing Page
3.7.2 Halaman Login
3.7.3 Halaman Daftar
3.7.4 Home
3.7.5 Halaman Menggambar
3.7.6 Daftar Gambar User
3.7.7 Hapus Daftar Gambar User
3.7.8 Daftar Nama User pada Admin
3.7.9 Daftar Gambar User pada Admin
3.7.10 Daftar Gambar User yang sudah dihapus oleh Admin
BAB IV
IMPLEMENTASI DAN PENGUJIAN
4.1 Landing Page dan Source Code
Pada bagian Dashboard page memuat tampilan utama yang berisi login untuk
menghubungkan ke halaman login.
4.2 Halaman Login dan Source Code
Pada halaman login berisi inputan untuk memasukkan email/username dan pasword
untuk login.
4.3 Halaman Daftar dan Source Code
Jika pengguna belum mempunyai akun maka disarankan untuk daftar terlebih dahulu pada
halaman daftar berisi inputan untuk memasukkan email, username dan pasword untuk
mendaftar
4.4 Home dan Sorce Code
Pada bagian home memuat button untuk membuat gambar dan melihat daftar gambar.
4.5 Halaman Menggambar dan Source Code
Pada page gambar berfungsi sebagai menggambar seperti tujuan aplikasi yang dibuat.
4.6 Daftar Gambar dan Source Code
Di halaman daftar gambar berisi daftar gambar user dan button untuk menghapus daftar
gambar.
4.7 Daftar Gambar sesudah delete dan Source Code
Pada page hapus daftar gambar memuat tampilan daftar gambar yang sudah terhapus
